<template>
  <div center>
    <el-form ref="info2" :inline="true" :rules="rules" :model="info" size="mini" label-position="right"
             label-width="110px">
      <el-form-item label="受检单位" prop="sjcdwmc">
        <el-input v-model="info.sjcdwmc" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="检测编号" prop="jcbh">
        <el-input v-model="info.jcbh" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="采样日期" prop="cyrq">
        <el-date-picker
          v-model="info.cyrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="检验仪器" prop="jyyq">
        <el-input v-model="info.jyyq" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="仪器编号" prop="yqbh">
        <el-input v-model="info.yqbh" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-divider></el-divider>

      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable1(null,null)">添加</el-button>
      </el-form-item>
      <el-table key="table1" border :data="info.table1Json" style="width: 100%">
        <el-table-column
          align="center"
          label="样品编号">
          <el-table-column
            prop="sampleNumber1"
            align="center"
            label="1">
          </el-table-column>
          <el-table-column
            prop="sampleNumber2"
            align="center"
            label="2">
          </el-table-column>
          <el-table-column
            prop="sampleNumber3"
            align="center"
            label="3">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="sampleWorkJob"
          align="center"
          label="采样车间及岗位">
        </el-table-column>
        <el-table-column
          prop="typeDust"
          align="center"
          label=" 粉尘种类">
        </el-table-column>
        <el-table-column
          align="center"
          label="滤膜质量(mg)">
          <el-table-column
            align="center"
            label="1">
            <el-table-column
              prop="samplingBefore1"
              align="center"
              label="采样前">
            </el-table-column>
            <el-table-column
              prop="samplingAfter1"
              align="center"
              label="采样后">
            </el-table-column>
            <el-table-column
              prop="weight1"
              align="center"
              label="增重">
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            label="2">
            <el-table-column
              prop="samplingBefore2"
              align="center"
              label="采样前">
            </el-table-column>
            <el-table-column
              prop="samplingAfter2"
              align="center"
              label="采样后">
            </el-table-column>
            <el-table-column
              prop="weight2"
              align="center"
              label="增重">
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            label="3">
            <el-table-column
              prop="samplingBefore3"
              align="center"
              label="采样前">
            </el-table-column>
            <el-table-column
              prop="samplingAfter3"
              align="center"
              label="采样后">
            </el-table-column>
            <el-table-column
              prop="weight3"
              align="center"
              label="增重">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          label="采样体积（L）">
          <el-table-column
            align="center"
            label="1">
            <el-table-column
              prop="samplingValueT1"
              align="center"
              label="Vt">
            </el-table-column>
            <el-table-column
              prop="samplingValueV1"
              align="center"
              label="V0">
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            label="2">
            <el-table-column
              prop="samplingValueT2"
              align="center"
              label="Vt">
            </el-table-column>
            <el-table-column
              prop="samplingValueV2"
              align="center"
              label="V0">
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            label="3">
            <el-table-column
              prop="samplingValueT3"
              align="center"
              label="Vt">
            </el-table-column>
            <el-table-column
              prop="samplingValueV3"
              align="center"
              label="V0">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          label="浓度(mg/m3)">
          <el-table-column
            prop="readingValue1"
            align="center"
            label="检测值">
          </el-table-column>
          <el-table-column
            prop="readingValue2"
            align="center"
            label="检测值">
          </el-table-column>
          <el-table-column
            prop="readingValue3"
            align="center"
            label="检测值">
          </el-table-column>
          <el-table-column
            prop="bigValue"
            align="center"
            label="最大值">
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          label="采接触时间(h/d)">
          <el-table-column
            prop="contactTime0"
            align="center">
          </el-table-column>
          <el-table-column
            prop="contactTime1"
            align="center">
          </el-table-column>
          <el-table-column
            prop="contactTime2"
            align="center">
          </el-table-column>
          <el-table-column
            prop="contactTime3"
            align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="value1"
          align="center"
          label="CTWA(mg/m³)">
        </el-table-column>
        <el-table-column
          prop="value2"
          align="center"
          label="CPE(mg/m³)">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable1(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable1(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-form-item label="分析人" prop="fxr">
        <el-select v-model="info.fxr" :disabled="isShow" multiple placeholder="请选择">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校对人" prop="jdr">
        <el-select v-model="info.jdr" :disabled="isShow" multiple placeholder="请选择">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分析日期" prop="fxrq">
        <el-date-picker
          v-model="info.fxrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" v-if="!isShow">
      <el-button type="primary" size="small" @click="addOrEdit">保存</el-button>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="120px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>样品编号</span>
          </div>
          <el-form-item label="1" prop="sampleNumber1">
            <el-input v-model="tableInfo.sampleNumber1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="2" prop="sampleNumber2">
            <el-input v-model="tableInfo.sampleNumber2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="3" prop="sampleNumber3">
            <el-input v-model="tableInfo.sampleNumber3" placeholder="请输入内容"/>
          </el-form-item>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>滤膜质量</span>
          </div>
          <el-form-item label="采样前" prop="samplingBefore1">
            <el-input v-model="tableInfo.samplingBefore1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="采样后" prop="samplingAfter1">
            <el-input v-model="tableInfo.samplingAfter1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="增重" prop="weight1">
            <el-input v-model="tableInfo.weight1" placeholder="请输入内容"/>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="采样前" prop="samplingBefore2">
            <el-input v-model="tableInfo.samplingBefore2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="采样后" prop="samplingAfter2">
            <el-input v-model="tableInfo.samplingAfter2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="增重" prop="weight2">
            <el-input v-model="tableInfo.weight2" placeholder="请输入内容"/>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="采样前" prop="samplingBefore3">
            <el-input v-model="tableInfo.samplingBefore3" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="采样后" prop="samplingAfter3">
            <el-input v-model="tableInfo.samplingAfter3" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="增重" prop="weight3">
            <el-input v-model="tableInfo.weight3" placeholder="请输入内容"/>
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>采样体积</span>
          </div>
          <el-form-item label="Vt" prop="samplingValueT1">
            <el-input v-model="tableInfo.samplingValueT1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="V0" prop="samplingValueV1">
            <el-input v-model="tableInfo.samplingValueV1" placeholder="请输入内容"/>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="Vt" prop="samplingValueT2">
            <el-input v-model="tableInfo.samplingValueT2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="V0" prop="samplingValueV2">
            <el-input v-model="tableInfo.samplingValueV2" placeholder="请输入内容"/>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="Vt" prop="samplingValueT3">
            <el-input v-model="tableInfo.samplingValueT3" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="V0" prop="samplingValueV3">
            <el-input v-model="tableInfo.samplingValueV3" placeholder="请输入内容"/>
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>浓度检测</span>
          </div>
          <el-form-item label="检测值1" prop="readingValue1">
            <el-input v-model="tableInfo.readingValue1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="检测值2" prop="readingValue2">
            <el-input v-model="tableInfo.readingValue2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="检测值3" prop="readingValue3">
            <el-input v-model="tableInfo.readingValue3" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="最大值" prop="bigValue">
            <el-input v-model="tableInfo.bigValue" placeholder="请输入内容"/>
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>接触时间</span>
          </div>
          <el-form-item label="1" prop="contactTime">
            <el-input v-model="tableInfo.contactTime" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="2" prop="contactTime1">
            <el-input v-model="tableInfo.contactTime1" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="3" prop="contactTime2">
            <el-input v-model="tableInfo.contactTime2" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="4" prop="contactTime3">
            <el-input v-model="tableInfo.contactTime3" placeholder="请输入内容"/>
          </el-form-item>
        </el-card>


        <el-form-item label="采样车间及岗位" prop="sampleWorkJob">
          <el-input v-model="tableInfo.sampleWorkJob" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="粉尘种类" prop="typeDust">
          <el-input v-model="tableInfo.typeDust" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="CTWA(mg/m³)" prop="value3">
          <el-input v-model="tableInfo.value3" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="CPE(mg/m³)" prop="value4">
          <el-input v-model="tableInfo.value4" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable1">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import imgUpdate from '@/components/Upload/imgUpdate'
import {addOrEdit, getInfo} from '@/api/table/tableSeven'
import {getUserList} from '@/api/system/sysUser'
import {getUserId} from '@/utils/auth'

export default {
  components: {
    imgUpdate
  },
  props: {
    noCreated: {
      type: Boolean,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {},
      userId: getUserId(),
      userList: [],
      tableInfo: {},
      tableIndex: null,
      table1Id: null,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      rules: {
        dzr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        sjcdwptr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        cyrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        fxrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        shr: [{required: true, message: '请选择内容', trigger: 'chang'}],
        fxr: [{required: true, message: '请选择内容', trigger: 'chang'}],
        jdr: [{required: true, message: '请选择内容', trigger: 'chang'}],
      }
    }
  }, created() {
    this.getUserList()
    this.info.table1Json = []
    // this.info.table2Json = []
  }, methods: {
    // 新增或编辑表1
    addTable1(index, row) {
      this.tableIndex = index
      this.tableInfo = {}
      if (row != null) {
        this.tableInfo = row
      }
      this.centerDialogVisible = true
    },
    // 保存表1
    addOrEditTable1() {
      if (this.tableIndex == null) {
        this.info.table1Json.push(this.tableInfo)
      } else {
        this.info.table1Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible = false
    },
    // 删除表1
    delTable1(index, row) {
      this.info.table1Json.splice(index, 1)
    },
    // 获取所有用户
    getUserList() {
      getUserList().then(response => {
        this.userList = response.data
      })
    },
    getInfo(id, table1Id) {
      getInfo(id, table1Id).then(response => {
        if (response.data.table1Json != null && response.data.table1Json != '') {
          response.data.table1Json = JSON.parse(response.data.table1Json)
        } else {
          response.data.table1Json = []
        }
        if (response.data.fxr != null) {
          response.data.fxr = JSON.parse(response.data.fxr)
          var ids = []
          for (let i = 0; i < response.data.fxr.length; i++) {
            ids.push(response.data.fxr[i].id)
          }
          response.data.fxr = ids
        } else {
          response.data.fxr = []
        }
        if (response.data.jdr != null) {
          response.data.jdr = JSON.parse(response.data.jdr)
          var ids = []
          for (let i = 0; i < response.data.jdr.length; i++) {
            ids.push(response.data.jdr[i].id)
          }
          response.data.jdr = ids
        } else {
          response.data.jdr = []
        }
        this.info = response.data
      })
    },
    addOrEdit: function () {
      this.$refs['info2'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id,
            this.info.tableOneId,
            this.info.cyrq,
            this.info.fxrq,
            2,
            JSON.stringify(this.info.table1Json),
            this.info.jyyq,
            JSON.stringify(this.info.fxr),
            JSON.stringify(this.info.jdr),
            this.info.yqbh,
            this.info.jcxm).then(response => {
            if (this.info.id == null) {
              // 新增
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              // 编辑
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
            this.$parent.$parent.getData()
            this.$parent.$parent.centerDialogVisible = false
          })
        }
      })
    },
    // 初始化
    init(id, table1Id) {
      this.getInfo(id, table1Id)
    }
  }
}
</script>

